<template>
    <div class="video-upload-container">
        <uploader
            :options="options"
            :file-status-text="statusText"
            class="uploader-example"
            ref="uploader"
            @file-success="fileSuccess"
            @file-error="fileError"
            @file-removed="fileRemove"
            style="width: 100%;">
            <uploader-unsupport></uploader-unsupport>
            <uploader-drop>
                <uploader-btn single :attrs="attrs">选择文件</uploader-btn>
            </uploader-drop>
            <uploader-list>
            </uploader-list>
        </uploader>
    </div>
</template>

<script>
export default {
    name: "common-video-upload",
    props: {
        value: {
            type: String,
            default: ""
        },
        // 上传后服务器保存文件夹
        namespace: {
            type: String,
            default: "video"
        },
        // 上传格式
        accept: {
            type: Array,
            default: () => {
                return ['.mp4'];
            },
        }
    },
    data() {
        return {
            fileUrl: "",
            options: {
                target: this.$config.baseURL + '/media/uploadMediaBigFile/smartserver/', //后台上传文件地址
                uploadMethod: "POST",
                singleFile: true,
                simultaneousUploads: 1, //并发上传数，默认 3
                testChunks: false, //是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。
                forceChunkSize: true, // 是否强制所有的块都是小于等于 chunkSize 的值。默认是 false。
                chunkSize: 2048000 //每片大小
            },
            attrs: {},
            statusText: {
                success: '上传成功',
                error: '上传失败',
                uploading: '上传中',
                paused: '暂停中',
                waiting: '等待中'
            },
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.clearData();
        });
    },
    created() {
        this.initUploadUrl();
    },
    methods: {
        initUploadUrl() {
            if (this.namespace) {
                this.options.target += this.namespace
            }
            if (this.accept) {
                this.attrs.accept = this.accept;
            }
        },
        fileRemove(file) {
            this.fileUrl = "";
            this.$emit("input", this.fileUrl)
        },
        fileError() {
            this.$message.warning('上传失败');
        },
        /**视频上传成功回调 */
        fileSuccess(rootFile, file, message, chunk) {
            // 添加文件列表
            this.fileUrl = message;
            this.$emit("input", this.fileUrl);
        },
        clearData() {

        }
    }
}
</script>

<style scoped>
.video-upload-container {
    width: 100%;
    height: 100%;
}
</style>
